<style scoped>
    .wrapper{
        background: #eee;
        padding: 1px;
    }
    .wrapper-header {
        box-shadow: 0 1px 1px rgba(0,0,0,.08);
    }
    .wrapper-header .ivu-menu-horizontal {
        height: 80px;
        line-height: 80px;
    }
    .ivu-menu-light {
        background: #fff;
    }
    .ivu-menu {
        display: block;
        margin: 0;
        padding: 0;
        outline: 0;
        list-style: none;
        color: #495060;
        font-size: 14px;
        position: relative;
    }
    .wrapper-header-nav {
        width: 90%;
        height: 0px;
        margin: 0 auto;
    }
    .wrapper-header-nav-logo {
        height: 0px;
        margin-top: 15px;
        float: left;
    }
    .wrapper-header-nav-list {
        height: inherit;
        float: right;
    }
    .wrapper-container {
        background: #fff;
        width: 95%;
        margin: 10px auto 10px;
        border-radius: 6px;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    }
    .middle{

    }
    .footer{
        background: #fff;
        color: #797575;
    }
    .footer-main{
        width: 90%;
        margin: 0 auto;
    }
    .footer-main .ivu-row {
        text-align: center;
        padding: 20px 0;
    }
</style>
<template>
    <div>
        <div class="wrapper">
            <div class="wrapper-header">
                <ul class="ivu-menu ivu-menu-light ivu-menu-horizontal">
                    <div class="wrapper-header-nav">
                        <div class="wrapper-header-nav-logo router-link-active">
                            <img src="../../../static/image/logo.png">
                        </div> 
                        <div class="wrapper-header-nav-search"></div> 
                        <div class="wrapper-header-nav-list"><li class="ivu-menu-item">
                            <i class="ivu-icon ivu-icon-person"></i>
                                {{staffName}}
                            </li>
                            <li class="ivu-menu-item">
                            <i class="ivu-icon ivu-icon-ios-navigate"></i>
                                城市:{{city}}
                            </li>
                            <li class="ivu-menu-item"><span class="ivu-badge"><i class="ivu-icon ivu-icon-ios-mic"></i>
                                    <Button type="text" @click="changePwd">修改密码</Button>
                                </span>
                            </li> 
                            <li class="ivu-menu-item"><i class="ivu-icon ivu-icon-ios-analytics"></i>
                                <Button type="text" @click="exit">退出</Button>
                            </li>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="wrapper-container">
                <middle></middle>
            </div>
            <div>
                <Modal
                    v-model="modal"
                    title="修改密码"
                    width="650"
                    >
                    <Form ref="formItem" :model="formItem" label-position="right" :label-width="120" :rules="rulePwd">
                        <Form-item label="输入原密码：" prop="oldpwd" >
                            <Input v-model="formItem.oldpwd" type="password" placeholder="请输入原密码"></Input>
                        </Form-item>
                        <Form-item label="输入新密码：" prop="newpwd1">
                            <Input v-model="formItem.newpwd1" type="password" placeholder="请输入新密码"></Input>
                        </Form-item>
                        <Form-item label="输入新密码：" prop="newpwd2">
                            <Input v-model="formItem.newpwd2" type="password" placeholder="请再次输入新密码"></Input>
                        </Form-item>       
                    </Form>
                    <div style="font-size:15px">
                        <div style="text-align:center;font-size:20px">
                            密码修改策略说明
                        </div>
                        <br>
                        <div style="color:red;margin-left:110px">
                             密码规则内控要求（密码格式如：Hpi*123）：<br>
                            （一）长度：至少6位，建议在16位以下。<br>
                            （二）复杂度：由大写、小写字母、数字和普通符号组成。<br>
                            （三）有效期：口令应每季度更换。<br>
                            （四）更换策略：新口令至少与前3次的口令不能相同<br>
                        </div>
                    </div>
                    <div slot="footer">
                        <Button type="primary" v-show="flag1&&flag2&&flag3"  @click="ok">确认</Button>
                        <Button type="ghost"   @click="cancel">取消</Button>
                    </div>
                </Modal>
            </div>
        </div>
        <div class="footer">
            <div class="footer-main">
                <div class="ivu-row">
                    <div>Copyright  2004-2016  华能山东信息技术有限公司版权所有</div>
                    <div>华能山东信息技术有限公司</div>
                    <div><a href="http://www.xinnet.com/domain/cert.do?method=listCert&enDomainName=chngec.com.cn" target='_blank'>华能山东信息技术有限公司域名证书</a></div>
                </div>
            </div>
        </div>      
    </div>
</template>
<script>
    import axios from 'axios'
    import middle from "./middle.vue"
    export default {
        
        data () {
            console.log(staff.staffId)
            var checkNumber = (rule, value, callback) => {
                var reg = new RegExp("^([A-Z]|[a-z]|[0-9]|[!@#$%^*&=()_+]){6,20}$");
                if (!value) {
                    return callback(new Error('密码不能为空'));
                }else if(!reg.test(value)){
                    callback(new Error('请按照规定输入密码'));
                }else {
                    this.flag1 = true;
                    callback();
                }
            };
            var checkOld = (rule, value, callback) => {
                var reg = new RegExp("^([A-Z]|[a-z]|[0-9]|[!@#$%^*&=()_+]){6,16}$");
                if (!value) {
                    this.flag2 = false;
                    return callback(new Error('密码不能为空'));
                }else if(!reg.test(value)){
                    this.flag2 = false;
                    callback(new Error('请按照规定输入密码'));
                }else if(value==this.formItem.oldpwd){
                         this.flag2 = false;
                    callback(new Error('新旧密码不能相同'));
                }else {
                    this.flag2 = true;
                    callback();
                }
            };
            var checkNew = (rule, value, callback) => {
                var reg = new RegExp("^([A-Z]|[a-z]|[0-9]|[!@#$%^*&=()_+]){6,16}$");
                if (!value) {
                    this.flag3 = false;
                    return callback(new Error('密码不能为空'));
                }else if(!reg.test(value)){
                    this.flag3 = false;
                    callback(new Error('请按照规定输入密码'));
                }else if(value!=this.formItem.newpwd1){
                    this.flag3 = false;
                    callback(new Error('两次输入新密码不一致'));
                }else {
                    this.flag3 = true;
                    callback();
                }
            };
            flag1:false;
            flag2:false;
            flag3:false;
            return {
                modal:false,
                formItem: {
                    oldpwd:'',
                    newpwd1:'',
                    newpwd2:''
                },
                rulePwd: {
                    oldpwd: [{validator: checkNumber}],
                    newpwd1:[{validator: checkOld}],
                    newpwd2:[{validator: checkNew}]
                },
                organId:'36',
                staffName:'管理员',
                city:'',
                flag1:false,
                flag2:false,
                flag3:false,
            }
        },
        mounted(){
            if(this.organId == '36'){
                this.city = "烟台"
            }else if(this.organId == '35'){
                this.city = "济南"
            }else if(this.organId == '37'){
                this.city = "临沂"
            }else if(this.organId == '39'){
                this.city = "青岛"
            }else if(this.organId == '44'){
                this.city = "聊城"
            }else{
                this.city = ""    
            }
        },
        methods: {
            changePwd(){
                this.modal= true;
                this.formItem = {oldpwd:'',newpwd1:'',newpwd2:''};
            },
            exit(){
                this.$Modal.confirm({
                    title: '确认退出，返回主页面',
                    content: '<p>请确认是否退出当前用户</p>',
                    onOk: () => {   
                        window.localStorage.setItem("staff", "");                     
                        window.location.href="http://localhost/#"; 
                    },
                    onCancel: () => {
                        that_.$Message.info('您选择了取消!');
                    }
                });              
            },
            ok() {
                let that_ = this
                that_.$refs["formItem"].validate(function(valid){
                    if (valid) {
                        that_.$Modal.confirm({
                            title: '确认保存数据',
                            content: '<p>请确认是否修改密码</p>',
                            onOk: () => {                        
                                axios({
                                    method:'POST',
                                    url: url_+'/process/grsf_wz_back', 
                                    params:{
                                        m:'changePwd',
                                        oldpwd:that_.formItem.oldpwd,
                                        newpwd: that_.formItem.newpwd1,
                                        staffId:staff.staffId,
                                        withCredentials:true
                                    }
                                })
                                .then(function (res) {
                                    if(res.success){
                                        that_.$Message.info(res.data.meg);
                                    }else{
                                        that_.$Message.info(res.data.meg);
                                    }                                        
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                                that_.modal=false
                            },
                            onCancel: () => {
                                that_.$Message.info('您选择了取消!');
                            }
                        });                                                                          
                        
                    } else {
                        that_.$Message.error('验证时报，请输出正确的信息!');
                    }
                });   
            },  
            cancel () {
                this.$Message.info('您选择了取消');
                this.modal=false
            },
        },
        components: {
            'middle': middle
      }
    }
</script>
